<template>
	<!-- Vue 文件的 template 需要有一个根标签 -->
	<view class="content">

		<!-- <swiper class="swiper" autoplay circular indicator-dots>
			<swiper-item wx:for="{{ swiperArr }}" wx:key="goods_id">
				<navigator open-type="{{ item.open_type }}" url="{{ item.navigator_url }}">
					<image class="swiper_image" src="{{ item.image_src }}"></image>
				</navigator>
			</swiper-item>
		</swiper> -->
		<!-- 1.0 使用搜索框组件 -->
		<search />
		<!-- 2.0 轮播图模块 -->
		<swiper class="swiper" autoplay circular indicator-dots>
			<swiper-item v-for="item in swiperArr" :key="item.goods_id">
				<navigator :open-type="item.open_type" :url="item.navigator_url">
					<image class="swiper_image" :src="item.image_src"></image>
				</navigator>
			</swiper-item>
		</swiper>
		<!-- 3.0 首页入口 -->
		<view class="entry">
			<navigator class="entry_item" v-for="item in entryArr" :key="item.name">
				<image class="entry_image" :src="item.image_src" />
			</navigator>
		</view>
		<!-- 4.0 首页楼层  for循环嵌套 -->
		<view class="floor" v-for="(item,index) in floorArr" :key="index">
			<view class="floor_title">
				<image class="floor_title_image" :src="item.floor_title.image_src" mode=""></image>
			</view>
			<view class="floor_main">
				<view class="floor_main_item" v-for="(item2,index2) in item.product_list" :key="index2">
					<image class="floor_main_image" :src="item2.image_src" mode="heightFix"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	// 1. 新建 src\components\search\index.vue 组件
	// 2. 导入组件
	import search from "@/components/search/index.vue";
	
	export default {
		// 3. 注册组件
		components: {
			search
		},
		data() {
			return {
				swiperArr: [],
				entryArr: [],
				floorArr: [],
			}
		},
		// 页面加载的生命周期函数
		onLoad() {
      
      // console.log(this.$request);
			// this.getSwiper1();
			this.getSwiper2();
			this.getEntry();
			this.getFloor();
		},
		methods: {
      
      // getSwiper1() {
      //   this.$request({
      //     // 现在只需要传递 API 地址，在封装的函数内部自动拼接成完整路径
      //     url: "/home/swiperdata",
      //   }).then(res => {
      //     console.log(res);
      //     this.swiperArr = res[1].data.message;
      //   });
      // },
      
      getSwiper2() {
        this.$request({
          // 现在只需要传递 API 地址，在封装的函数内部自动拼接成完整路径
          url: "/home/swiperdata",
        }).then(res => {
          console.log(res);
          this.swiperArr = res;
        });
      },
      
			getSwiper() {
				uni.request({
					url: "https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata",
					// success:(res)=>{
					// 	console.log(res.data.message);
					// }
				}).then(res => {
					// 注意 then 的 res 返回值是一个数组
					//   数组第[0]项：错误对象
					//   数组第[1]项：数据
					// console.log(res[1].data.message);
					this.swiperArr = res[1].data.message;
				});
			},
			// 获取入口的函数封装
			getEntry() {
				uni.request({
					url: "https://api-hmugo-web.itheima.net/api/public/v1/home/catitems",
				}).then(res => {
					// console.log(res);
					this.entryArr = res[1].data.message;
				});
			},
			// 获取楼层数据
			getFloor(){
				uni.request({
					url:'https://api-hmugo-web.itheima.net/api/public/v1/home/floordata'
				}).then(res=>{
					// console.log('getFloor', res[1].data.message);
					this.floorArr = res[1].data.message;
				});
			}
		}
	}
</script>

<style lang="less">
	// 轮播图模块
	.swiper,
	.swiper_image {
		width: 750rpx;
		height: 340rpx;
	}

	// 首页入口模块
	.entry {
		display: flex;

		&_item {
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 20rpx 0;
		}

		&_image {
			width: 128rpx;
			height: 140rpx;
		}
	}
	
	.floor{
		&_title_image{
			width: 750rpx;
			height: 60rpx;
		}
		&_main{
			// 检测内部的浮动元素，清除浮动带来的影响
			overflow: hidden;
			&_image{
				width: 232rpx;
				height: 188rpx;
				// 利用浮动实现图片环绕效果
				float: left;
				margin-left: 12rpx;
				margin-bottom: 12rpx;
			}
			&_item:nth-child(1){
				image{
					height: 388rpx;
				}
			}
		}
	}
</style>
